<template>
    <div class="content-main" v-if="showEnvironmentFlag == 3">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/teacher/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>影院网站数据分析系统 - 环境介绍</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="content-title">
                <img src="./../../assets/images/title_icon5.png" />案例环境准备
            </div>
            <div class="surroundings-box">
                <div class="surroundings-left">
                    <ul>
                        <li>
                            <div class="left-title">1.案例环境介绍：</div>
                            <div class="left-content">
                                {{ introduction }}
                            </div>
                        </li>
                        <li>
                            <div class="left-title">2.检查案例进程：</div>
                            <div class="left-content">
                                {{ process }}
                            </div>
                        </li>
                        <li>
                            <div class="left-title">3.案例数据介绍：</div>
                            <div class="left-content">
                                <div class="item" v-for="(item, index) in dataIntroduction">
                                    <div class="item-left">
                                        <img src="./../../assets/images/title_icon6.png" />
                                    </div>
                                    <div class="item-content">
                                        <p>{{ item }}</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="surroundings-right">
                    <div class="right-title">实验平台</div>
                    <div class="right-surroundings-code">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-main" v-else-if="showEnvironmentFlag == 2"  style="height:100%;">
        <div class="project-tips-box">
            <img src="./../../assets/images/project_tips2.jpg" />
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data () {
            return {
                projectId: '',
                showEnvironmentFlag: '',
                introduction: '',
                process: '',
                dataIntroduction: []
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.showEnvironmentFlag = this.$store.state.itemServiceValue.showEnvironmentFlag
            if(this.showEnvironmentFlag == 3){
                this.init() //初始化
            }
        },
        methods: {
            init(){
                let self  = this
                self.$http.get('/dataplatform/environment/detail?itemId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.introduction = res.data.introduction
                        self.process = res.data.process
                        self.dataIntroduction = res.data.dataIntroduction
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        },
        computed:{
			...mapState(['itemServiceValue'])
		}
    }
</script>
